@import '../../theme/mixins/mixins.scss';

@include b(ripple) {
  position: relative;
  user-select: none;
  @include e(wrapper) {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
  }
  @include e(element) {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    @include when(visible) {
      transform: scale(1);
      opacity: 0.36;
      animation: ripple-element-enter 550ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    @include m(child) {
      display: block;
      width: 100%;
      height: 100%;
      background-color: currentColor;
      border-radius: 50%;
      opacity: 1;
      @include when(leaving) {
        opacity: 0;
        animation: ripple-element-child-exit 550ms cubic-bezier(0.4, 0, 0.2, 1);
      }
    }
  }
}

@keyframes ripple-element-enter {
  0% {
    transform: scale(0);
    opacity: 0.1;
  }
  100% {
    transform: scale(1);
    opacity: 0.36;
  }
}

@keyframes ripple-element-child-exit {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
